<script setup>
import { ref, onMounted } from "vue";
import TnNavbar from "@tuniao/tnui-vue3-uniapp/components/navbar/src/navbar.vue";
// import { get, post } from "@/servers/request/index.js";

const activeIndex = ref(0);
const switchItems = ref(["中", "ئۇ"]);
const switchItemText = ref(switchItems.value[activeIndex.value]);

function handleSwitch(index) {
  activeIndex.value = index;
  switchItemText.value = switchItems.value[index];
}

const shequClick = (item) => {
  console.log("item", item);
};
const searchClick = (index) => {
  console.log("search", index);
};
// onMounted(() => {
//   fetchData();
// });
// function fetchData() {
//   get("default/index", {
//     success: (res) => {},
//   })
//     .then((response) => {
//       const data = response.data.data;
//     })
//     .catch((err) => {});
// }
</script>
<template>
  <view class="app">
    <TnNavbar bg-color="tn-gradient-bg__cool-17" fixed>
      APP邻居团购
      <template #back>
        <view class="navback">
          <view class="SwitchBox">
<<<<<<< HEAD
            <view v-for="(item, index) in switchItems" :key="index"
              :class="['SwitchItem', { active: activeIndex === index }]" @click="handleSwitch(index)">
              {{ item }}
            </view>
            <view :style="{
              left: activeIndex * 40 + 'rpx',
              backgroundColor: switchItems[activeIndex] === '中',
            }" class="ActiveBorder"></view>
=======
            <view
              v-for="(item, index) in switchItems"
              :key="index"
              :class="['SwitchItem', { active: activeIndex === index }]"
              @click="handleSwitch(index)"
            >
              {{ item }}
            </view>
            <view
              :style="{
                left: activeIndex * 40 + 'rpx',
                backgroundColor: switchItems[activeIndex] === '中',
              }"
              class="ActiveBorder"
            ></view>
>>>>>>> 0fa3b125bbe09daf2e9b1426e61e053d2d01b6e7
          </view>
        </view>
      </template>
    </TnNavbar>
    <view class="navbarBox">
      <view class="rol">
        <image class="shopimg" src="@/static/image/shop.png" />
        <view class="below" @click="shequClick(item)">
          请选择社区
          <image class="belowimg" src="@/static/image/jiantou.png" />
        </view>
      </view>
      <view class="rolt" @click="searchClick(index)">
        <view class="finput">
          <image class="fimg" src="@/static/image/icon_search.png" />
          请输入商家、商品名称
        </view>
      </view>
    </view>
  </view>
</template>
<style scoped>
.navback {
  padding: 10rpx;
  overflow: hidden;
}

.SwitchBox {
  width: 120rpx;
  height: 48rpx;
  background-color: rgb(240, 123, 92);
  border-radius: 50rpx;
  display: flex;
  position: relative;
}

.SwitchItem {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #000;
  transition: all 0.3s;
}

.SwitchItem.active {
  color: #000;
}

.ActiveBorder {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 50rpx;
  height: 2px;
  border-radius: 1px;
  transform: translateX(0);
  transition: all 0.3s;
}

<<<<<<< HEAD
.SwitchItem.active+.ActiveBorder {
=======
.SwitchItem.active + .ActiveBorder {
>>>>>>> 0fa3b125bbe09daf2e9b1426e61e053d2d01b6e7
  transform: translateX(100%);
}

/* 增加选中的文字有背景颜色 */
.SwitchItem.active {
  background-color: rgba(249, 208, 51);
  border-radius: 30rpx;
}

.navbarBox {
  margin-top: -1rpx;
  height: 80rpx;
  width: 100%;
  background: #ea326b;
  display: flex;
  justify-content: space-between;
}

.rol {
  margin-left: 15rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}

.shopimg {
  width: 50rpx;
  height: 50rpx;
}

.below {
  font-size: 32rpx;
}

.belowimg {
  width: 18rpx;
  height: 10rpx;
}

.rolt {
  height: 100%;
  display: flex;
  align-items: center;
  margin-right: 15rpx;
  text-align: center;
}

.finput {
  height: 60rpx;
  width: 315rpx;
  color: #7b7b7b;
  background: #f7f7f7;
  border-radius: 40rpx;
  font-size: 24rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fimg {
  width: 28rpx;
  height: 28rpx;
}
</style>
